<template>
  <div class="item-html-container">
    <!-- 标题 -->
    <div class="title-container">
      <span class="title">{{ itemData.title }}</span>
    </div>
    <div class="img-layer-container">
      <!-- 封面 -->
      <div class="img-container" @click="linkHandler(itemData.link)">
        <!-- <img class="cover" src="@/assets/default.png"> -->
        <!-- <img class="cover" :src="itemData.cover"> -->
        <van-image class="cover" :src="itemData.cover">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template v-slot:error>加载失败</template>
        </van-image>
      </div>
      <!-- 胶带 -->
      <img class="jiaodai jiaodai-1" src="@/assets/jiaodai.png">
      <img class="jiaodai jiaodai-2" src="@/assets/jiaodai.png">
    </div>
    <!-- 简介 -->
    <div class="discription-container">
      <span class="discription">{{ itemData.discription | discription }}</span>
    </div>
  </div>
</template>

<script>
import default_png from '@/assets/default.png'
import { Image, loading } from 'vant'
export default {
  filters: {
    discription(data) {
      if (!data || data === ' ') {
        return '这个赞到无法用语言表达啦!'
      }
      return data
    }
  },
  components: {
    vanImage: Image,
    vanLoading: loading
  },
  props: {
    itemData: {
      type: Object,
      required: false,
      default() {
        return {
          title: '默认标题',
          discription: ' ',
          cover: default_png
        }
      }
    }
  },
  methods: {
    linkHandler(href) {
      const { itemData } = this
      // window.location.href = href
      this.$router.push({
        path: 'webView',
        query: { title: itemData.title, url: itemData.link }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item-html-container {
  width: 40%;
  margin: 5%;
  position: relative;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  .img-layer-container {
    position: relative;
    .jiaodai {
      width: 60%;
      position: absolute;
      opacity: 0.7;
    }
    .jiaodai-1 {
      top: -15%;
      left: -20%;
    }
    .jiaodai-2 {
      top: 70%;
      left: 55%;
    }
  }
  .img-container {
    width: 100%;
    height: 0;
    padding-bottom: calc(100% - 10px);
    position: relative;
    border: 5px double #dddcd1;
    overflow: hidden;
    .cover {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .title-container {
    width: 100%;
    display: inline-block;
    margin: 10px 0;
    padding: 5px;
    border-bottom: 2px solid #dddcd1;
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
    position: relative;
    overflow-x: scroll;
    .title {
      display: block;
      width: 105%;
      position: relative;
      // animation: title-run 1s 1s linear;
    }
  }
  .discription-container {
    border-bottom: 2px solid #dddcd1;
    font-size: 14px;
    .discription {
      position: relative;
      top: 1px;
      display: inline;
      border-bottom: 2px solid #dddcd1;
      text-align: left;
      padding: 5px;
      line-height: 2;
      &::before {
        // content: "简介: ";
      }
    }
  }
}

@keyframes title-run {
  0% {
    left: 5%;
  }
  25% {
    left: -5%;
  }
  50% {
    left: 5%;
  }
  75% {
    left: -5%;
  }
  100% {
    left: 5%;
  }
}
</style>
